import React, { Component } from 'react';
import { Button, Input, Switch, Modal, Form, Col, Row, Tag, Select, DatePicker } from "antd";
import TheButton from "@/components/TheButton";
import TheTable from "@/components/TheTable";
import ThePagination from "@/components/ThePagination";
import { apiPage, apiDisplay, apiDel, apiView, apiGetGoodsDetail } from '@/request/marketingTool'
import './style.scss'
const { Search } = Input;
const { Option } = Select
const { RangePicker } = DatePicker;
export default class Bargain extends Component {
    constructor() {
        super()
        this.state = {
            title: '',
            columns: [
                {
                    title: "商品ID",
                    dataIndex: "dataId",
                    key: "dataId",
                },
                {
                    title: "主图",
                    dataIndex: "title",
                    key: "title",
                },
                {
                    title: "商品名称",
                    dataIndex: "title",
                    key: "title",
                },

                {
                    title: "规格",
                    dataIndex: "skuJson",
                    key: "skuJson",
                    render: (text, render) => {
                        return text ? JSON.parse(text).map(item => `${item.key}:${item.value}`).join("，") : '';
                    },
                },
                {
                    title: "物料ID",
                    dataIndex: "title",
                    key: "title",
                },
                {
                    title: "商品原价",
                    dataIndex: "price",
                    key: "price",
                    render: (text, render) => {
                        return <React.$Price price={text} />
                    },
                },
                {
                    title: "所属类目",
                    dataIndex: "title",
                    key: "title",
                },
                {
                    title: "商品品牌",
                    dataIndex: "title",
                    key: "title",
                },
                {
                    title: "砍价模式",
                    dataIndex: "cutMode",
                    key: "cutMode",
                    render: (text, render) => {
                        return text == 0 ? '无需砍到底价即可购买' : '砍到底价才可购买';
                    },
                },
                {
                    title: "砍价最低价",
                    dataIndex: "cutPriceLow",
                    key: "cutPriceLow",
                    render: (text, render) => {
                        return <React.$Price price={render.cutPriceLow} />
                    },
                },
                // {
                //     title: "活动时间",
                //     dataIndex: "title",
                //     key: "title",
                // },
                {
                    title: "砍价有效期",
                    dataIndex: "activityName",
                    key: "activityName",
                    render: (text, render) => {
                        return `${render.startTime} 至 ${render.endTime}`;
                    },
                },
                {
                    title: "砍价库存",
                    dataIndex: "stock",
                    key: "stock", 
                    render: (text, render) => {
                        return text == -1 ? '不限制' : text;
                    },
                },
                {
                    title: "帮砍模式",
                    dataIndex: "cutPriceType",
                    key: "cutPriceType",
                    render: (text, render) => {
                        return text == 0 ? '随机金额' : '固定金额';
                    },
                },
                {
                    title: "帮砍人数",
                    dataIndex: "userNum",
                    key: "userNum",
                },
                {
                    title: "固定金额",
                    dataIndex: "title",
                    key: "title",
                    render: (text, render) => {
                        return text == -1 ? '不限制' : text;
                    },
                },
                {
                    title: "每人限购",
                    dataIndex: "userBuyLimit",
                    key: "userBuyLimit",
                },
                {
                    title: "操作人",
                    dataIndex: "title",
                    key: "title",
                },

                {
                    title: "操作日期",
                    dataIndex: "createTime",
                    key: "createTime",
                },
                // {
                //     title: "上架/下架",
                //     dataIndex: "activityStatus",
                //     key: "activityStatus",
                //     render: (text, render) => {
                //         return <Switch defaultChecked={text} onChange={(e) => this.display(e, render)} />;
                //     },
                // },
                {
                    title: "操作",
                    width: 200,
                    fixed: 'right',
                    render: (text, render) => {
                        return (
                            <div>
                                <TheButton onClick={() => this.onView(text)} >查看</TheButton>
                                <TheButton onClick={() => this.props.history.push('/marketingTool/bargainAdd/' + text.id)} >编辑</TheButton>
                                <TheButton onClick={() => this.del(text)}>删除</TheButton>
                                <TheButton onClick={() => this.display(text.activityStatus, text)}>{text.activityStatus ? '下架' : '上架'}</TheButton>

                            </div>
                        );
                    },
                },
            ],
            dataSource: [],
            pageData: {
                pageNo: 1,
                pageSize: 10,
            },
            total: 0,
            isModalVisible: false,
            info: {},
            currentSku: {},
            productSku: {}
        }
    }
    componentDidMount() {
        this.getData()
    }
    onView(row) {
        apiView({ id: row.id }).then(res => {
            if (res.code === 0) {

                this.setState({ isModalVisible: true, info: res.data })
                this.apiGetGoodsDetail(res.data.goodsId, res.data.dataId)
            }

        })

    }
    del(row) {
        React.$confirm({
            title: "提示",
            type: 'warning',
            content: "确定确定删除？",
            onOk: async () => {
                apiDel({ id: row.id }).then(res => {
                    if (res.code === 0) {
                        this.getData()
                        React.$message({
                            type: 'success',
                            content: res.codeMessage
                        })
                    } else {
                        React.$message({
                            type: 'warning',
                            content: res.codeMessage
                        })
                    }
                })
            }
        });

    }
    async apiGetGoodsDetail(goodsId, skuId) {
        let res = await apiGetGoodsDetail({ goodsId })
        if (res.code === 0) {
            if (skuId) {
                this.setState({
                    currentSku: res.data.skuInfo.filter(item => item.SKUId === skuId)[0],
                    productSku: res.data
                })
            }

        }
    }
    display(e, row) {

        React.$confirm({
            title: "提示",
            type: 'warning',
            content: "确定确定变更状态？",
            onOk: async () => {
                apiDisplay({ id: row.id }).then(res => {
                    if (res.code === 0) {
                        row.activityStatus = !row.activityStatus
                        React.$message({
                            type: 'success',
                            content: res.codeMessage
                        })
                    } else {
                        React.$message({
                            type: 'warning',
                            content: res.codeMessage
                        })
                    }
                })
            },
            onCancel: () => {
                row.activityStatus = row.activityStatus
            }
        });

    }
    getData() {
        let { pageData, title } = this.state
        this.setState({
            dataSource: []
        })
        apiPage({ ...pageData, title: title }).then(res => {
            if (res.code === 0) {
                this.setState({
                    dataSource: res.data,
                    total: res.totalCount
                })
            }
        })
    }
    pageChange = (pageNo, pageSize) => {
        this.setState({
            pageData: {
                pageNo,
                pageSize
            }
        }, () => this.getData())
    }
    onSearch(e) {

        this.setState({
            title: e,
            pageData: {
                pageNo: 1,
                pageSize: 10
            },
        }, () => this.getData())

    }
    handleCancel() {
        this.setState({
            isModalVisible: false,
            productSku: {},
            currentSku: {},
            info: {}
        })
    }
    onFinish = (values) => {
        console.log(values, 'asd');
    }
    render() {
        const { columns, dataSource, pageData, total, info, isModalVisible, currentSku, productSku } = this.state
        return (
            <div className="p-layout-box">

                <div style={{ display: 'flex', alignItems: 'center', marginBottom: 12 }}>
                    <Form
                        layout="inline"
                        onFinish={(e) => this.onFinish(e)}
                        initialValues={{ title: '', cutMode: '', cutPriceType: '' }}
                    >
                        <Form.Item name="title">
                            <Input placeholder="商品名称" style={{ width: 200 }} />
                        </Form.Item>
                        <Form.Item name="layout">
                            <Select style={{ width: 200 }} placeholder="请选择所属类目">
                                <Option value="jack">Jack</Option>
                            </Select>
                        </Form.Item>
                        <Form.Item name="layout">
                            <Select style={{ width: 200 }} placeholder="请选择商品品牌">
                                <Option value="jack">Jack</Option>
                            </Select>
                        </Form.Item>
                        <Form.Item name="cutMode">
                            <Select style={{ width: 200 }} placeholder="请选择砍价模式">
                                <Option value={0}>无需砍到底价即可购买</Option>
                                <Option value={1}>砍到底价才可购买</Option>
                            </Select>
                        </Form.Item>
                        <Form.Item name="cutPriceType">
                            <Select style={{ width: 200 }} placeholder="请选择帮砍模式">
                                <Option value={0}>随机金额</Option>
                                <Option value={1}>固定金额</Option>
                            </Select>
                        </Form.Item>
                        <Form.Item name="times">
                            <RangePicker />
                        </Form.Item>
                        <Form.Item >
                            <Button type="primary" htmlType="submit">搜索</Button>&nbsp;&nbsp;
                            <Button type="default">重置</Button>
                        </Form.Item>
                    </Form>
                </div>
                <div style={{ display: 'flex', alignItems: 'center', marginBottom: 12 }}>
                    <Button type="primary" onClick={() => this.props.history.push('/marketingTool/bargainAdd/' + null)}>+ 新建</Button>
                </div>
                <TheTable
                    scroll={{ x: "max-content", y: '63vh' }}
                    columns={columns}
                    dataSource={dataSource}
                />
                <ThePagination pageNo={pageData.pageNo} pageSize={pageData.pageSize} total={total} pageChange={this.pageChange} />
                <Modal title="查看详情" visible={isModalVisible} width="60%" onCancel={() => this.handleCancel()} footer={null}>
                    <Form
                        labelCol={{
                            span: 8,
                        }}
                        wrapperCol={{
                            span: 16,
                        }}
                    >
                        <Row>

                            {
                                productSku.hasOwnProperty('skuInfo') &&
                                <Col span={12} >
                                    <Form.Item
                                        label="商品"
                                        name="cutMode"

                                    >
                                        <div className='goodsDesc'>
                                            <div className='info'>
                                                <img src={currentSku.imageFile ? currentSku.imageFile.split(',')[0] : ''} alt="商品图片" className='goodsImg' />
                                                <div className="goodsInfo">
                                                    <p className='name'>{info.title}</p>
                                                    <p className='price' >
                                                        价格:&nbsp;&nbsp;<React.$Price price={currentSku.skuCurrentPrice} />&nbsp;&nbsp;
                                                        <React.$Price price={currentSku.skuOriginalPrice} del={true} />
                                                    </p>
                                                </div>
                                            </div>
                                            <div className='goodsSku'>
                                                {
                                                    productSku.skuInfo.map(item =>
                                                        <Tag className='tag' key={item.SKUId} color={item.SKUId === currentSku.SKUId ? "cyan" : ''} >
                                                            {item.skuAttribute.map(item2 => item2.value).join(',')}
                                                        </Tag>
                                                    )
                                                }
                                            </div>
                                        </div>
                                    </Form.Item>
                                </Col>
                            }
                            <Col span={12}>
                                <Form.Item
                                    label="砍价模式"
                                    name="cutMode"

                                >
                                    <div>{info.cutMode === 0 ? '无需砍到底价即可购买' : '砍到底价才可购买'}</div>
                                </Form.Item>
                            </Col>
                            <Col span={12}>
                                <Form.Item
                                    label="砍价最低价"
                                    name="cutPriceLow"

                                >
                                    <React.$Price price={info.cutPriceLow} />
                                </Form.Item>
                            </Col>
                            <Col span={12}>
                                <Form.Item
                                    label="活动时间"
                                    name="activityTime"

                                >
                                    <div>{info.startTime} 至 {info.endTime}</div>
                                </Form.Item>
                            </Col>
                            <Col span={12}>
                                <Form.Item
                                    label="砍价有效期"
                                    name="expire"

                                >
                                    <div>{info.expire}小时</div>
                                </Form.Item>
                            </Col>
                            <Col span={12}>
                                <Form.Item
                                    label="砍价库存"
                                    name="stock"

                                >
                                    <div>{info.stock === -1 ? '不限制' : info.stock}</div>
                                </Form.Item>
                            </Col>
                            <Col span={12}>
                                <Form.Item
                                    label="帮砍价格"
                                    name="cutPriceType"

                                >
                                    <div>{info.cutPriceType === 0 ? '随机金额' : '固定金额'}</div>
                                </Form.Item>
                            </Col>
                            <Col span={12}>
                                <Form.Item
                                    label="帮砍人数"
                                    name="userNum"

                                >
                                    <div>{info.userNum}</div>
                                </Form.Item>
                            </Col>
                            <Col span={12}>
                                <Form.Item
                                    label="每人限购"
                                    name="userBuyLimit"
                                >
                                    <div>{info.userBuyLimit === -1 ? '不限制' : info.userBuyLimit}</div>
                                </Form.Item>
                            </Col>
                            <Col span={12}>
                                <Form.Item
                                    label="新人一刀抵多刀"
                                    name="newCutCount"
                                >
                                    <div>{info.newCutCount}</div>
                                </Form.Item>
                            </Col>
                        </Row>

                    </Form>
                </Modal>
            </div>
        );
    }
}
